{% load static get_attribute %}

<table id="items-table" class="min-w-full divide-y divide-gray-200 table-fixed dark:divide-gray-600">
    <thead class="bg-gray-100 dark:bg-gray-700">
      <tr>
        <th scope="col" class="p-4">
          <div class="flex items-center">
            <input id="checkbox-all" aria-describedby="checkbox-1" type="checkbox"
              class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600">
            <label for="checkbox-all" class="sr-only">checkbox</label>
          </div>
        </th>
        {% for field in db_field_names %}
          <th id="th_{{ field }}" scope="col" class="p-4 text-xs font-medium text-left text-gray-500 uppercase dark:text-gray-400">{{ field }}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">

        {% for item in items %}
            {% include "partials/item_row.html" %}
        {% endfor %}

    </tbody>
</table>

{% for item in items %}
    <!-- Delete item Modal -->
    <div id="delete-item-{{ item.pk }}" tabindex="-1" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
        <div class="relative p-4 w-full max-w-md max-h-full">
            <div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
                <button type="button" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="delete-item-{{ item.pk }}">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
                <div class="p-4 md:p-5 text-center">
                    <svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                    </svg>
                    <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">Are you sure you want to delete this item?</h3>
                    <button
                        hx-delete="{% url "delete" link item.pk %}" 
                        hx-target="#item-{{ item.pk }}" 
                        hx-swap="innerHTML"
                        hx-on="htmx:afterRequest: 
                            document.querySelector('[data-modal-hide=&quot;delete-item-{{item.pk}}&quot;]').click();"
                        type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
                        Yes, I'm sure
                    </button>
                    <button data-modal-hide="delete-item-{{ item.pk }}" type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">No, cancel</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit item Modal -->
    <div id="edit-item-{{ item.pk }}" data-modal-backdrop="static" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
        <div class="relative p-4 w-full max-w-2xl max-h-full">
            <!-- Modal content -->
            <div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
                <!-- Modal header -->
                <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                        Edit {{ link|capfirst }}
                    </h3>
                    <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="edit-item-{{ item.pk }}">
                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                        </svg>
                        <span class="sr-only">Close modal</span>
                    </button>
                </div>
                <form method="post">
                {% csrf_token %}
                    <div class="p-4 md:p-5 space-y-4">
                        <div class="grid grid-cols-2 gap-3">
                            {% for key, values in fk_fields.items %}
                                <div class="col-span-1">
                                    <div class="form-group">
                                        <label for="id_{{ key }}" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ key|title }}</label>
                                        <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" name="{{ key }}" id="id_{{ key }}">
                                            {% for i in values %}
                                                <option value="{{ i.id }}">{{ i }}</option>
                                            {% endfor %}
                                        </select>                                                    
                                    </div>
                                </div>
                            {% endfor %}

                            {% for field_name in db_field_names %}
                                {% if field_name not in read_only_fields and field_name not in fk_fields_keys %}
                                    <div class="col-span-1">
                                        <div class="form-group">                                                                    
                                            <label for="id_{{ field_name }}" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ field_name|title }}</label>
                                            {% if field_name in choices_dict %}
                                                <select name="{{ field_name }}" id="id_{{ field_name }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                                                    <option value="">Select {{ field_name }}</option>
                                                    {% for key, value in choices_dict|get:field_name %}
                                                        <option {% if item|getattribute:field_name == key %} selected {% endif %} value="{{ key }}">{{ value }}</option>
                                                    {% endfor %}
                                                </select>
                                            {% else %}
                                                {% if field_name in integer_fields %}
                                                <input type="number" name="{{ field_name }}" value="{{ item|getattribute:field_name }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ field_name }}" id="id_{{ field_name }}">
                                                {% elif field_name in date_time_fields %}
                                                <input type="datetime-local" name="{{ field_name }}" value="{{ item|getattribute:field_name }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ field_name }}" id="id_{{ field_name }}">
                                                {% elif field_name in date_fields %}
                                                <input type="date" name="{{ field_name }}" value="{{ item|getattribute:field_name|date:"Y-m-d" }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ field_name }}" id="id_{{ field_name }}">
                                                {% elif field_name in email_fields %}
                                                <input type="email" name="{{ field_name }}" value="{{ item|getattribute:field_name }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ field_name }}" id="id_{{ field_name }}">
                                                {% elif field_name in text_fields %}
                                                <input type="text" name="{{ field_name }}" value="{{ item|getattribute:field_name }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ field_name }}" id="id_{{ field_name }}">
                                                {% else %}
                                                <input type="text" name="{{ field_name }}" value="{{ item|getattribute:field_name }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ field_name }}" id="id_{{ field_name }}">
                                                {% endif %}
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                        <button 
                            type="button" 
                            hx-post="{% url "update" link item.pk %}"
                            hx-target="#item-{{item.pk}}"
                            hx-swap="outerHTML"
                            hx-include="closest form"
                            class="w-full justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-primary-800">
                            Update
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- View Sales Drawer -->
    <div id="view-item-{{ item.pk }}" data-modal-backdrop="static" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
        <div class="relative p-4 w-full max-w-2xl max-h-full">
            <!-- Modal content -->
            <div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
                <!-- Modal header -->
                <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                        Authenticate to Edit
                    </h3>
                    <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="view-item-{{ item.pk }}">
                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                        </svg>
                        <span class="sr-only">Close modal</span>
                    </button>
                </div>
                <form method="post" action="{% url "update" link item.pk %}">
                {% csrf_token %}
                    <div class="p-4 md:p-5 space-y-4">
                        <div class="grid grid-cols-2 gap-3">
                            {% for key, values in fk_fields.items %}
                                <div class="col-span-1">
                                    <div class="form-group">
                                        <label for="id_{{ key }}" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ key|title }}</label>
                                        <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" name="{{ key }}" id="id_{{ key }}">
                                            {% for i in values %}
                                                <option value="{{ i.id }}">{{ i }}</option>
                                            {% endfor %}
                                        </select>                                                    
                                    </div>
                                </div>
                            {% endfor %}

                            {% for field_name in db_field_names %}
                                {% if field_name not in read_only_fields and field_name not in fk_fields_keys %}
                                    <div class="col-span-1">
                                        <div class="form-group">                                                                    
                                            <label for="id_{{ field_name }}" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ field_name|title }}</label>
                                            {% if field_name in choices_dict %}
                                                <select name="{{ field_name }}" id="id_{{ field_name }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                                                    <option value="">Select {{ field_name }}</option>
                                                    {% for key, value in choices_dict|get:field_name %}
                                                        <option {% if item|getattribute:field_name == key %} selected {% endif %} value="{{ key }}">{{ value }}</option>
                                                    {% endfor %}
                                                </select>
                                            {% else %}
                                                {% if field_name in integer_fields %}
                                                <input type="number" name="{{ field_name }}" value="{{ item|getattribute:field_name }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ field_name }}" id="id_{{ field_name }}">
                                                {% elif field_name in date_time_fields %}
                                                <input type="datetime-local" name="{{ field_name }}" value="{{ item|getattribute:field_name }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ field_name }}" id="id_{{ field_name }}">
                                                {% elif field_name in email_fields %}
                                                <input type="email" name="{{ field_name }}" value="{{ item|getattribute:field_name }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ field_name }}" id="id_{{ field_name }}">
                                                {% elif field_name in text_fields %}
                                                <input type="text" name="{{ field_name }}" value="{{ item|getattribute:field_name }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ field_name }}" id="id_{{ field_name }}">
                                                {% else %}
                                                <input type="text" name="{{ field_name }}" value="{{ item|getattribute:field_name }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ field_name }}" id="id_{{ field_name }}">
                                                {% endif %}
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                        <button type="submit"
                            class="w-full justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-primary-800">
                            Update
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endfor %}